<template>
  <view class="product-comments" >
    <view class="content">
      <view class="head" @click="goToAllComments">
        <view class="title">
          <view class="name">宝贝评价（{{ commentsNum }}）</view>
          <view class="percent"></view>
        </view>
        <view class="more">
          <text class="button" >查看全部</text>
          <image class="arrow" mode="aspectFit" src="/static/images/rightmore.png"></image>
        </view>
      </view>
      <view class="comments">
        <view class="item" v-for="(comment, index) in list" :key="comment.id">
          <view class="head" >
            <view class="user">
				<image class="avatar" :src="comment.user_avatar_url ? comment.user_avatar_url : '/static/images/logo.png'"></image>
				<view class="comment-desc">
					<view class="name">{{ comment.user_name }}</view>
					<view class="comment-time">{{ comment.created_at }}</view>
				</view>
				
            </view>
          <!--  <view class="operations">
							<image class="praise" v-if="comment.is_favor" src="/static/images/praise.png"></image>
							<image class="unpraise" v-else src="/static/images/unpraise.png" mode=""></image>
            </view> -->
          </view>
          <view class="desc">{{ comment.content }}</view>
          <view class="pictures" v-if="comment.images">
            <image class="pic" v-for="(img,index) in comment.images" :key="index" :src="img" @click="previewImage(index,comment.images)"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductCommentsListCom",
  props: {
    product: {
      type: Object,
      required: true,
      default: null
    },
    commentsNum: {
      default:0
    },
		list:{
			default:[]
		}
  },
  methods: {
    goToAllComments() {
      uni.navigateTo({url: `/packs/pages/comment/index?id=${this.product.id}`})
    },
		previewImage(index,imgs) {
			uni.previewImage({
				current: index,
				urls: imgs
			})
		}
  }
}
</script>

<style lang="scss" scoped>
.product-comments {
  background: #FFFFFF;
  margin: 0rpx auto;
  
  .content {
    margin: 20rpx auto;
    padding: 20rpx 0;
    .head {	
      display: flex;
      justify-content: space-between;
      .title {
        display: flex;
        justify-content: space-between;
		padding:0 20rpx;
        .name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .percent {
          font-size: 20rpx;
          color: #999999;
        }
      }
      .more {
		  display: flex;
		  align-items: center;
		  margin-right: 20rpx;
        .button {
          font-size: 24rpx;
          color: #999999;
        }
        .arrow {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .comments {
      .item {
		padding:20rpx 20rpx 0rpx 20rpx;
		margin-top: 20rpx;
		
        .head {
          display: flex;
          justify-content: space-between;
          .user {
            display: block;
            justify-content: space-between;
			overflow: hidden;
            .avatar {
              width: 88rpx;
              height: 88rpx;
              margin-right: 10rpx;
			  border-radius: 50%;
			  float:left;
			  
            }
			.comment-desc{
				float:left;
				margin-top: 15rpx;
				margin-left:16rpx;
				.name {
				  font-size: 26rpx;
				  color: #333333;
				  
				}
				.comment-time{
					color:#999;
					font-size:24rpx;
					margin-top:5rpx;
				}
			}
            
          }
          .operations {
            .praise {
              width: 36rpx;
              height: 36rpx;
            }
          }
        }
        .desc {
          margin: 20rpx 0 20rpx 10rpx;
          font-size: 24rpx;
          color: #333333;
          line-height: 32rpx;
        }
        .pictures {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .pic {
            width: 236rpx;
            height: 236rpx;
            margin:0 5rpx 15rpx 10rpx;
          }
        }
      }
    }
  }
}
</style>
